<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:animate-elem-29-b </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-animate-elem-29-b.html">Full version</a>, <a href="basic-animate-elem-29-b.html">Basic version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/animate.html#AnimationElements">19.2 Animation elements</a></p>
 <p>
				<a href="full-animate-elem-22-b.html">animate-elem-22-b ←</a> 
				<a href="full-index.html">index</a>
				<a href="full-color-prop-01-b.html">→ color-prop-01-b</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>animate-elem-29-b</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=480 height=360>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/animate-elem-29-b.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=480 height=360 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/animate-elem-29-b.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of animate-elem-29-b" src="../png/full-animate-elem-29-b.png" width="480" height="360"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
			<p>
                Test compositing of animated fill opacity.
            </p>
			<p>
                The assumption is that you will first click on "fade in" and
                then click on "fade out", each exactly once. The first time you
                select the link 'fade in', you should see a red square appearing,
                gradually and smoothly fading from zero to 100% opacity over the
                course of three seconds. This square is in front of and thus
                obscures the lower left circle, but is behind the upper right
                circle which is thus is composited on top of the animated red
                square. Then, when you click on "fade out", the red square will
                gradually disappear, smoothly fading from 100% to zero opacity
                over the course of three seconds.
            </p>
			<p>
                The rendered picture should match the reference image, (except
                for possible variations in the labelling text (per CSS2 rules))
                after activating the link on the fade-in button the first time
                and waiting three seconds for the animation to compete. The picture
                should remain looking the same way indefinitely, until another
                link is activated.
            </p>
			<p>
                With the second click on "fade in", however, the behavior might
                be different. In the case of having a first click on "fade in",
                waiting three seconds, and then immediately perform a first click
                on "fade out", waiting three seconds, and then immediately perform
                a second click on "fade in", you should see the following. After
                the first click on "fade in", the red square goes from zero to 100%
                opacity. After the first click on "fade out", the red square goes
                from 100% to zero opacity. After the second click on "fade in",
                however, the red square goes from zero to 100% opacity, and then
                goes back from 100% to zero opacity. This is because of the
                hyperlinking rules as they relate to resolved start times in the
                SMIL Animation specification.
            </p>

		</div>
<div class="linkbar"> <p>
				<a href="full-animate-elem-22-b.html">animate-elem-22-b ←</a>
				<a href="full-index.html">index</a>
				<a href="full-color-prop-01-b.html">→ color-prop-01-b</a>
						</p></div>
</body>
</html>
